<%@ page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<%@page import="com.domain.Employees"%>
	<jsp:useBean id="em" scope="request" type="java.util.List"></jsp:useBean>
<!DOCTYPE html>
<html>
 <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/CRM/Example/css/searchFilter.css" />
    <link rel=stylesheet type="text/css" href="http://localhost:8080/CRM/Example/css/ui.jqgrid.css">
    <link rel=stylesheet type="text/css" href="http://localhost:8080/CRM/Example/css/ui.multiselect.css">
    <link rel="stylesheet" type="html/css" href="http://localhost:8080/CRM/Example/css/jqgrid.custom.css" />
    <style>
        .ui-grid-ico-sort ui-icon-desc ui-icon ui-icon-triangle-1-s ui-sort-ltr ui-state-disabled {
        height: 20px;
        width: 30px;
        
        }
       ul li {position: relative;} 

ul li:hover {
z-index: 1000;
} 

ul li ul {
position: absolute; top: 0; left: 0;
display: none;
}

ul li:hover ul {
display: block;
} 
    </style>
<script src="http://localhost:8080/CRM/Example/jq/jquery-1.9.0.min.js"></script>
<script src="http://localhost:8080/CRM/Example/jq/jquery.jqGrid.min.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/grid.locale-cn.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/grid.addons.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/grid.postext.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/grid.setcolumns.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/jquery.contextmenu.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/jquery.searchFilter.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/jquery.tablednd.js"></script>
    <script src="http://localhost:8080/CRM/Example/jq/ui.multiselect.js"></script>
    <link rel="stylesheet" href="http://localhost:8080/CRM/Example/template023/css/stylemenu.css" type="text/css">
<link rel="stylesheet" href="http://localhost:8080/CRM/Example/template023/css/styles.css" type="text/css">
    <script type="text/javascript">
        $(function () {

            $('li').has('ul').mouseover(function () {
                $(this).children('ul').show();
            }).mouseout(function () {
                $(this).children('ul').hide();
            })

        });
    </script>
  <script type="text/javascript">

    onload=function () {
        jQuery("#list4").jqGrid({
            datatype: "local", height: 600,
            colNames: ['Last Name', 'First Name', 'ID','Extension', 'Email','Modify'],
            colModel: [
                { name: 'ln', index: 'ln', width: 90, height: 50, sorttype: "innerHTML" },
                { name: 'fn', index: 'fn', width: 90, height: 50, sorttype: "innerHTML" },
                { name: 'id', index: 'id', width: 85, height: 50, sorttype: "innerHTML" },
                { name: 'ex', index: 'ex', width: 85, height: 50, sorttype: "innerHTML" },
                { name: 'em', index: 'em', width: 150, height: 50, sorttype: "innerHTML" },
                { name: 'modify', index: 'modify', width: 100, height: 50, sorttype: "innerHTML" },
                ],
            multiselect: false,
            caption: "Employee Information",
            autowidth: true,
            height: '50%',
            search: true,
            rownumWidth: 30,
            rownumHeight: 100,
            pgbuttons: true,
            pginput: true,
            gridview: true,
            viewrecords: true,
            rownumbers: true,
            sortorder: "desc",
            gridview: true
        });
       
        jQuery("#list4").jqGrid('filterToolbar');
        var mydata = [
                      <% 
                      for (int i=0;i<em.size();i++){
                    	  Employees c=(Employees)em.get(i);
                    	  out.println("{ ln: '"+c.getLastName()+"' , fn: '"+c.getFirstName()+"', id:'"+c.getEmployeeId()+"' ,ex: '"+c.getExtension()+"' , em: '"+c.getEmail()+"', modify: '<a href=/CRM/Employee/Create?code="+c.getEmployeeId()+">Update</a>&#32&#32&#32&#32<a href=/CRM/Employee/Delete?code="+c.getEmployeeId()+">Delete</a>'},");
                     
                      }%> ];
        
        for (var q = 0; q < mydata.length; q++){
            jQuery("#list4").addRowData(mydata[q].id, mydata[q]);
        
    }
    }
</script> 
</head>
<body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table width="1300" height="70" border="0" align="center" cellpadding="0" cellspacing="0">
  <!--DWLayoutTable-->
  <tr> 
    <td><img src="http://localhost:8080/CRM/Example/template023/images/beautyshop01.jpg" height="200" width="1300"/></td>
  </tr>
</table>
    <table width="1300" height="70" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr> 
    <td>    
   
<ul id="menu" z-index="1000">
	<li><a href="http://localhost:8080/CRM/index">Home</a></li>
	<li>
		<a href="#">Treatment</a>
		<ul>
			<li>
		<a href="http://localhost:8080/CRM/Treatment/List">Treatment List</a>
			</li>
			<li>
		<a href="http://localhost:8080/CRM/Treatment/CreateForm">Treatment Create</a>
			</li>
		</ul>
	</li>
	<li>
		<a href="#">Package Information</a>
		<ul>
			<li>
		<a href="http://localhost:8080/CRM/Package/List">Package List</a>
			</li>
			<li>
		<a href="http://localhost:8080/CRM/Package/CreateForm">Package Create</a>
			</li>
		</ul>		
	</li>
    <li>
		<a href="#">Employee Information</a>
		<ul>
			<li>
		<a href="http://localhost:8080/CRM/Employee/List">Employee List</a>
			</li>
			<li>
		<a href="http://localhost:8080/CRM/Employee/CreateForm">Employee Create</a>
			</li>
            <li>
		<a href="http://localhost:8080/CRM/Report/Employees">Employee Report</a>
			</li>
		</ul>		
	</li>
    <li>
		<a href="#">Customer Information</a>
		<ul>
			<li>
		<a href="http://localhost:8080/CRM/Customer/List">Customer List</a>
			</li>
			<li>
		<a href="http://localhost:8080/CRM/Customer/AddForm">Add Customer</a>
			</li>
		</ul>		
	</li>
    <li>
		<a href="#">Sales Information</a>
		<ul>
			<li>
		<a href="http://localhost:8080/CRM/Report/TopTreatmentSalesFrom">Top Treatment Sales Report</a>
			</li>
			<li>
		<a href="http://localhost:8080/CRM/Transaction/TreatmentForm">Sales Transaction</a>
			</li>
            <li>
		<a href="http://localhost:8080/CRM/Transaction/Treatment/Search">Search Treatment Transaction</a>
			</li>
		</ul>		
	</li>
	<li>
		<a href="http://localhost:8080/CRM/Employee/Logout">Logout</a>
	</li>
</ul>
</td> <td>&#32&#32&#32&#32</td><td>&#32&#32&#32&#32</td><td>User Name: Solio</td>
  </tr>
</table>

<table width="1300" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center">
  <!--DWLayoutTable-->
   
    
    <td width="300" rowspan="2" valign="top">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
     <img width="300" height="500" src="http://localhost:8080/CRM/Example/template023/images/Z-BEAUTY logo.jpg" />
    </table></td>
    <td width="1000" height="172" valign="top">
       <table id="list4" class="scroll" cellpadding="0" cellspacing="0" ></table>
    </td>
</table>
<table width="1300" height="40" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#2E2500">
  <tr> 
    <td height="24" align="center" valign="middle" class="text1"> Copyright &copy; 
      2013 Beauty Salon. All rights reserved. 
      </td>
  </tr>
</table>
</body>
</html>